<template>
  <div class="wrapper">
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="谣言检测" name="one">
          <pie-chart :msg="dataList" />
        </el-tab-pane>
        <el-tab-pane label="用户立场分析" name="two" />
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import { findFakeDetectResult } from '@/api/fake_detect'
import { sortBy } from '@/utils/common'
import PieChart from './component/pieChart.vue'

export default {
  name: 'RingChart',
  components: {
    PieChart
  },
  data() {
    return {
      activeName: 'one',
      dataList: []
    }
  },
  async created() {
    this.init_page() // 初始化数据
  },
  methods: {
    async init_page() {
      const { data } = await findFakeDetectResult({ ID: this.$route.query.id })
      const fakeDetectResult = data.fakeDetectRes
      this.init_pieChart(fakeDetectResult.tagPercent) // 初始化饼图，数据为谣言检测各标签的概率，通过逗号连接的字符串 20%，30%，50%
      this.init_barChart(fakeDetectResult.stance) // 初始化柱形图，数据为json字符串 {user2: 2, user3: 3} 针对评论的立场分类标签：0:评论；1：支持；2：否定；3：疑问
    },
    init_pieChart(tagPercent) {
      const tagList = ['真实', '谣言', '未经证实']
      const dataList = tagPercent.split(',').map((item, index) => {
        item = item.substring(0, item.length - 1)
        return { value: item, name: tagList[index] }
      })
      dataList.sort(sortBy('value', -1))
      this.dataList = dataList
    },
    init_barChart() {}
  }
}
</script>
<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .pieChart {
    width: 100%;
    margin:0 auto;
    height: 600px;
    /* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/
    background-size: 100% 100%;
  }
</style>
